<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    <link rel="stylesheet" type="text/css" href="./css/fonts/css/font-awesome.min.css" />
    <style>
    	#footer{
            height: 120px;
        }
        #tab{
            height: 60px;
            text-align: center;
        }
        #tab span{
            display: inline-block; width: 3em; padding-top: 30px; font-size: 14px;
            margin-right: 20px;
        }
        #tab .t1{
            background: url(./image/t1_g.png) no-repeat center 4px;
            -webkit-background-size: 20px 22px;
            background-size: 20px 22px;
        }
        #tab .t1.active{
            background: url(./image/t1.png) no-repeat center 4px;
            -webkit-background-size: 20px 22px;
            background-size: 20px 22px;
        }
        #tab .t2{
            background: url(./image/t2_g.png) no-repeat center top;
            -webkit-background-size: 32px 29px;
            background-size: 32px 29px;
        }
        #tab .t2.active{
            background: url(./image/t2.png) no-repeat center top;
            -webkit-background-size: 32px 29px;
            background-size: 32px 29px;
        }
        #content{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-flex-flow: row;
                   flex-flow: row;
        }
        #content .shit{
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            flex: 1;
        }
        .voice, .order{
            width: 42px; height: 42px; border-radius: 42px;
            border:1px solid #ff8e05; text-align: center; line-height: 42px; 
            font-size: 20px; color: #ff8903;
        }
        .voice{
            margin-left: 14px;
        }
        .order{
            font-size: 14px; margin-right: 14px;
        }
        .shit{
            border-radius: 6px; color: #fff; font-size: 20px;
            text-align: center; line-height: 42px; text-indent: -9999px;
            margin: 0 10px;
            background:#f88f00 url(./image/shit.png) no-repeat center;
            -webkit-background-size: 108px 27px;
            background-size: 108px 27px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1><div class="logo" tapmode="" onclick="openSideNav();"></div>didiShit</h1>
        </div>
        <div id="main">
                
        </div>
        <div id="footer">
            <div id="tab">
                <span class="t1" tapmode onclick="switchIt(1);">坐便式</span>
                <span class="t2 active" tapmode onclick="switchIt(2);">蹲坑式</span>
            </div>
            <div id="content">
                <div class="voice fa fa-microphone" tapmode onclick="speak();"></div>
                <div class="shit" tapmode onclick="dropping();">我要拉屎</div>
                <div class="order" tapmode onclick="order();">预约</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/zepto.js"></script>
<script type="text/javascript">
    var sideNavOpened = false;
    function closeSideNav(){
        if(sideNavOpened){
            api.closeFrame({name: 'frm_nav'});
            sideNavOpened = false;
        }
    }
    function openSideNav(){
        if(!sideNavOpened){
            api.openFrame({
                name: 'frm_nav',
                opaque: false,
                bounces: false,
                bgColor: 'rgba(0,0,0,0.6)',
                url: './html/frm_nav.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                }
            });
            sideNavOpened = true;
        }else{
            closeSideNav();
        }
        
    }

    function switchIt(type){
        api.execScript({
            frameName: 'main',
            script: 'updateAnnotation('+ type +');'
        });
        $('#tab .active').removeClass('active');
        $(event.target).addClass('active');
    }

    function dropping(){
        api.openWin({
	        name: 'dropping',
	        animation: {
	        	type: 'movein',
	        	subType: 'from_right'
	        },
	        url: './html/win_dropping.html'
        });
    }
    
    function order(){
    	api.openWin({
	        name: 'win_order',
	        url: './html/win_order.html',
	        animation: {
	        	type: 'movein',
	        	subType: 'from_right'
	        }
        });
    }

    function speak(){
        api.openWin({
            name: 'win_speak',
            url: './html/win_speak.html',
            opaque: false,
            animation: {
                type: 'fade'
            }
        });
    }

    apiready = function(){
        api.setStatusBarStyle({
            style: 'dark'
        });

        api.addEventListener('keyback',function(){
            if(sideNavOpened){
                closeSideNav();
            }
        });

        var header = $api.byId('header');
        $api.fixIos7Bar(header); 
        var headerPos = $api.offset(header);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);

        api.openFrame({
            name: 'main',
            url: 'html/main.html',
            bounces: false,
            opaque: true,
            bgColor: '#fff',
            pageParam: {
                headerH: headerPos.h
            },
            rect: {
                x: 0,
                y: headerPos.h,
                w: headerPos.w,
                h: mainPos.h
            }
        });
    };
</script>
</html>